<template>
  <div class="login contentHeight">
    <!-- 登录盒子 -->
    <div class="loginBox contentBox">
      <el-form>
        <div class="loginImg"></div>
        <el-input
          placeholder="登录账号"
          v-model="loginName"
          class="loginName"
          :class="[
            checkBln.userName === ''
              ? ''
              : checkBln.userName
              ? 'successBorder'
              : 'failBorder',
          ]"
          @change="checkInput('userName')"
          ref="inpFocus"
        ></el-input>
        <el-input
          placeholder="登录密码"
          v-model="loginPassword"
          show-password
          :class="[
            checkBln.userPsw === ''
              ? ''
              : checkBln.userPsw
              ? 'successBorder'
              : 'failBorder',
          ]"
          @change="checkInput('userPsw')"
        ></el-input>
        <div class="loginCodeBox">
          <el-input
            placeholder="验证码"
            v-model="loginCode"
            class="loginCode"
            :class="[
              checkBln.code === ''
                ? ''
                : checkBln.code
                ? 'successBorder'
                : 'failBorder',
            ]"
            @change="checkInput('code')"
          ></el-input>
          <div class="codeBox" id="codeBox"></div>
        </div>
        <el-button
          :disabled="loginBtnBln"
          class="loginBtn"
          :class="{ canLoginBtn: !loginBtnBln }"
          @click="login"
          >登录</el-button
        >
        <div class="reviseBox">
          <router-link to="/revisePsw">忘记密码</router-link>
          <span class="line"></span>
          <router-link to="/register">注册账号</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import VerificationCode from "../../public/js/verificationCode.js";
import contentHeight from "../../public/js/contentHeight.js";
import checkRegexp from "../../public/js/checkRegexp.js";
import { mapActions } from "vuex";
// 引入jq
import $ from "jquery";
// 引入jq插件Particleground
import "../../public/js/jquery.particleground.min.js";
$(function () {
  $(".login").particleground({
    dotColor: "#F1F9FB", //点颜色
    lineColor: "#1D5BA8", //线颜色
  });
});
export default {
  inject: ["reload"], //注入依赖
  data() {
    return {
      codeEle: "", //保存验证码画布实例
      loginName: "", //登录账号
      loginPassword: "", //登录密码
      loginCode: "", //验证码
      loginBtnBln: true, //登录按钮的disabled
      checkBln: {
        //输入框检验布尔值
        userName: "",
        userPsw: "",
        code: "",
      },
    };
  },
  methods: {
    // 解构获取vuex中action的方法
    ...mapActions(["saveUserId", "saveUserName", "saveUserHeadImg"]),
    // 校验input框
    checkInput(type) {
      switch (type) {
        // 用户名
        case "userName":
          this.$set(this.checkBln, type, checkRegexp("name", this.loginName));
          break;
        // 用户密码
        case "userPsw":
          this.$set(
            this.checkBln,
            type,
            checkRegexp("password", this.loginPassword)
          );
          break;
        // 验证码
        case "code":
          this.$set(
            this.checkBln,
            type,
            this.codeEle.confirmCode(this.loginCode)
          );
          break;
      }
      this.checkLoginBtn();
    },
    // 检验能否点击登录按钮
    checkLoginBtn() {
      if (
        this.checkBln.userName &&
        this.checkBln.userPsw &&
        this.checkBln.code
      ) {
        this.loginBtnBln = false;
      }
    },
    // 登录
    login() {
      this.loginBtnBln = true;
      // 发送登录请求
      this.axios
        .post("/login", {
          loginName: this.loginName,
          loginPassword: this.loginPassword,
        })
        .then((res) => {
          let result = res.data.data;
          if (result.status == 1) {
            // 登录成功
            this.$message({
              message: result.message,
              type: "success",
              showClose: true,
              duration: 1500,
            });
            // 将登录返回信息保存到cookie中
            this.$cookie.set("userinfo", JSON.stringify(result.userinfo));
            // 将登录返回信息保存到vuex中
            this.saveUserId(result.userinfo.id);
            this.saveUserName(result.userinfo.userName);
            this.saveUserHeadImg(result.userinfo.headImg);
            // 跳转首页
            this.$router.push("/");
          } else {
            // 登录失败
            this.$message({
              message: result.message,
              type: "error",
              showClose: true,
              duration: 1500,
            });
            // 刷新页面
            this.reload();
          }
        });
    },
  },
  created() {
    this.$nextTick(() => {
      // 获取高度
      contentHeight();
      // 生成验证码画布
      this.codeEle = new VerificationCode({
        depositId: "codeBox",
        color: "#FBB8AC",
        bgColor: "transparent",
        len: 4,
      });
    });
  },
  mounted() {
    // input自动获取焦点
    this.$refs.inpFocus.focus();
  },
};
</script>

<style lang='less'>
.login {
  width: 100%;
  background: url("../../public/img/login/login_bg_min.png") no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  // 粒子线
  .pg-canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  // 登录盒子
  .loginBox {
    width: 320px;
    padding: 20px 40px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgba(0, 0, 0, 0.8) 100%
    );
    box-shadow: 0px 0px 40px rgba(6, 17, 47, 0.7) inset;
    color: #f1fafa;
    // 图标
    .loginImg {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: url("../../public/img/bigtree.png") no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
    }
    // 登录密码
    .loginName {
      margin: 15px 0;
    }
    // 验证码盒子
    .loginCodeBox {
      width: 100%;
      margin: 15px 0 25px;
      .loginCode {
        width: 50%;
      }
      // 验证码画布
      .codeBox {
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        margin-left: 60px;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        cursor: pointer;
      }
    }
    // 登录按钮
    .loginBtn {
      display: block;
      width: 100px;
      height: 40px;
      margin: 0 auto;
      border: 0;
      background: 0;
      box-shadow: 0px 0px 20px rgba(254, 254, 254, 0.7) inset;
    }
    .canLoginBtn {
      color: #67c23a;
      box-shadow: 0px 0px 20px rgba(103, 194, 58, 0.9) inset;
    }
    // 忘记密码/注册账号
    .reviseBox {
      margin-top: 25px;
      font-size: 12px;
      text-align: center;
      color: #f1fafa;
      .line {
        display: inline-block;
        width: 1px;
        height: 16px;
        margin: 0 15px;
        background: #f1fafa;
        vertical-align: bottom;
      }
    }
    // 输入框背景色
    .el-input__inner {
      background: 0;
      color: #f1fafa;
    }
    // 输入框颜色  成功与失败
    .successBorder {
      .el-input__inner {
        border-color: #67c23a;
      }
    }
    .failBorder {
      .el-input__inner {
        border-color: #f56c6c;
      }
    }
  }
}
</style>